<template>
    <div>
        <button @click="handler">切换div显示与隐藏</button>
        <div class="container" v-if="visite" ref="container"></div>
    </div>
</template>

<script setup lang="ts">
//在修改数据之后立即使用这个方法，获取更新后的 DOM。
import { nextTick, ref } from 'vue';
const visite = ref(false);
const container: any = ref();
//按钮的点击事件
const handler = () => {
    //无非修改响应式数据
    //响应式数据发生变化:模版进行二次、三次、四次更新
    //将虚拟DOM转换为真实DOM节点---消耗一点点时间
    visite.value = !visite.value;
    //异步语句
    nextTick(() => {
        container.value && (container.value.style.background = `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`)
    })
</script>

<style scoped>
.container {
    width: 300px;
    height: 300px;
    background-color: skyblue;
}
</style>